<template>
  <div id="app">
    <Nav @nav-change="navChange" :propIndex="index"></Nav>
    <Main @nav-change="navChange"></Main>
    <Footer></Footer>
  </div>
</template>

<script>
  import Nav from "./components/Nav";
  import Main from "./components/Main";
  import Footer from "./components/Footer";
  export default {
    data(){
      return{
        index:0
      }
    },
    methods:{
      navChange(index){
        this.index = index
        switch (index) {
          case 0:
            this.$router.push('/universities')
            break
          case 1:
            this.$router.push('/league')
            break
          case 2:
            this.$router.push('/province')
            break
          case 3:
            this.$router.push('/street-view')
            break
          case 4:
            this.$router.push('/contact')
            break
        }
      }
    },
    components:{
      Nav,
      Main,
      Footer
    }
  }
</script>

<style>
  .amap-wrapper {
    width: 500px;
    height: 500px;
  }
</style>
